<template>
	<div class="header-container">
		<div class="title-img">
			<!-- title文字 -->
			<span>{{ props.title }}</span>
			<!-- title单选 -->
			<slot name="right"></slot>
			<!-- title图片 -->
			<img @click="isDialog" class="header" :src="props.src" v-show="props.src != ''" />
		</div>
		<div class="mark">
			<slot name="mark" />
		</div>
	</div>
</template>

<script lang="ts" setup>
const props = defineProps({
	src: {
		type: String,
		required: false,
		default: ""
	},
	title: {
		type: String,
		required: true,
		default: ""
	}
});

// 展示弹框
const emit = defineEmits(["is-dialog"]);
const isDialog = () => {
	emit("is-dialog", "");
};
</script>

<style lang="less" scoped>
.header-container {
	padding: 24px 24px 6px;
	.title-img {
		display: flex;
		font-family: "PingFang SC";
		font-size: 22px;
		color: rgb(255 255 255 / 100%);
		align-items: center;
		> span {
			margin-right: auto;
		}
		> img {
			cursor: pointer;
			margin-left: 24px;
			height: 20px;
		}
	}
}
</style>
